<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>

<%
    request.setCharacterEncoding("UTF-8");
    String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
    String date = format.format(new Date());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/CSS/backLayout.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/CSS/bombBox.css">


</head>
<style>
    .seachform li span {
        color: #444444;
        padding-left: 60px;
    }

    li input {
        width: 80px;
    }

    select {
        width: 80px;
        height: 30px;
        line-height: 30px;
    }

    .seachform li {
        float: left;
    }

    .scinput {
        line-height: 10px;
        margin-top: 5px
    }

    .scinput1 {
        margin-top: -2px;
        height: 30px;
    }

    .scbtn {
        background: #57a0ff;
        border-radius: 20px;
        width: 110px;
        height: 35px;
        margin-left: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        outline: none;
        border: none;
    }

    thead {
        background: #f2f2f2
    }

    .template th {
        height: 45px;
        background: none;
    }

    .template tr {
        height: 45px;
    }

    .template tr th {
        height: 20px;
        border-left: 1px solid #dddee6;
        border-right: 1px solid #dddee6;
        color: #444444;
        text-align: center;
    }

    .tou {
        background: #e4eafe
    }

    .kh {
        border-bottom: 1px solid #dddee6;
    }

    .shuju td {
        border: 1px solid #dddee6;
        color: #787c88;
        text-align: center;
    }

    .shuju:nth-child(odd) {
        background: #ffffff
    }

    .shuju:nth-child(even) {
        background: #f3f5fb
    }

    .shuju:last-child {
        border-bottom: 1px solid #dddee6;
    }

    .shuju:HOVER {
        background: #fff6cd;
    }

    ul {
        border: none;
    }

    .shuju td:first-child {
        width: 120px;
    }

    #shuju_td {
        width: 23px;
    }

    tr {
        height: 28px;
    }
</style>
<body style="background: #f5f5f5">
<div class="main">
    <div class="weizhi">
        报表>>学员状态统计表
    </div>
    <div class="div_body" style="height: 60px; min-height: 60px;margin-bottom: 0px; ">

        <form action="<%=path%>/DrivingSys/outXls" class="form" method="post">
            <ul class="seachform">
                <li>
                    <span class="scinput">科目&nbsp;:&nbsp;</span>
                    <select id="state">
                        <option value="1">科目一</option>
                        <option value="2">科目二</option>
                        <option value="3">科目三</option>
                    </select></li>
                <%--<li><span class="scinput1">开始时间&nbsp;:&nbsp;</span>
                    <input name="beginTime" id="begindate" value="${beginTime}" style="color: gray;"
                           onclick="WdatePicker({el:'begindate',dateFmt:'yyyy-MM-dd'})"/>
                    <img onclick="WdatePicker({el:'begindate',dateFmt:'yyyy-MM-dd '})"
                         src="<%=path%>/image/date.jpg" align="absmiddle" style="padding-left: 15px"></li>
                <li><span class="scinput1">结束时间&nbsp;:&nbsp;</span>
                    <input name="endTime" id="enddate" value="${endTime}" style="color: gray;"
                           onclick="WdatePicker({el:'enddate',dateFmt:'yyyy-MM-dd'})"/>
                    <img onclick="WdatePicker({el:'enddate',dateFmt:'yyyy-MM-dd '})"
                         src="<%=path%>/image/date.jpg" align="absmiddle" style="padding-left: 15px"></li>--%>
                <li><span class="scinput1">开始时间&nbsp;:&nbsp;</span><input class="scinput1" name="beginTime"
                                                                          type="text"
                                                                          onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}',dateFmt:'yyyy-MM'})"
                                                                          id="datemin"
                                                                          value="${beginTime}"></li>
                <li><span class="scinput1">结束时间&nbsp;:&nbsp;</span><input class="scinput1" name="endTime"
                                                                          type="text"
                                                                          onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM'})"
                                                                          id="datemax"
                                                                          value="${endTime}">
                </li>

                <li>
                    <input id="xls" type="hidden" name="xls" value="">
                    <input type="hidden" name="fileNames" id="fileNames" value="学员状态统计表">
                </li>
                <li>
                    <input type="button" class="scbtn" id="selsect" value="立即查询"/>
                </li>
                    <shiro:hasPermission name="/outXlsChooseStudentStateDetail">
                <li><label>&nbsp;</label><input name="" type="submit" id="dc"
                                                class="scbtn" value="导出Excel" /></li>
                </shiro:hasPermission>

            </ul>
        </form>

    </div>
    <div id="temp"
         style="width: 100%; overflow: auto; margin-bottom: 20px; margin-top: 30px; background: #fff; box-shadow: 0 0 10px #f2f2f2; min-height: 600px">

    </div>
</div>


</body>
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path%>/HoganJS/handlebars-v4.0.11.js"></script>
<script id="table-template-carrefuke1" type="text/x-handlebars-template">
    <div class="journaling">
        <table id="template" width="100%" align="center" style="min-height:30px;border-spacing:0;">
            <tr class="shuju">
                <td style="width: 20px;height: 25px; font-size: 18px;" colspan="18">学员状态统计汇总表（大小车科目一）</td>
            </tr>
            <tr class="shuju">
                <td colspan="6" style="width: 20px;height: 25px; font-size: 16px;">单位名称：{{gsName}}</td>
                <td style=" text-align: center; " colspan="17">时间：<span
                        id="beginTime"></span>至<span
                        id="endTime"></span></td>
            </tr>
            <tbody id="table1" style="border-spacing: 0px">
            <tr class="shuju">
                <td rowspan="3" style="background: rgb(228,234,254)">月份</td>
                <td colspan="7" style="background: rgb(228,234,254)">车型(进入科一培训的总人数)</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">已报名</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">已约科目一</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">已考科目一不及格</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">科目一及格</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">合计</td>
            </tr>
            <tr class="shuju">
                <td colspan="5" style="background: rgb(228,234,254)">大车</td>
                <td colspan="2" style="background: rgb(228,234,254)">小车</td>
            </tr>
            <tr class="shuju">
                <td id="shuju_td">A1</td>
                <td>A2</td>
                <td>A3</td>
                <td>B1</td>
                <td>B2</td>
                <td>C1</td>
                <td>C2</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
            </tr>
            </tbody>
            <tbody id="table2">
            {{#each carExpense}}
            <tr class="shuju">
                <td>{{zero fbizdate}}</td>
                <td>{{zero carTypeA1}}</td>
                <td class="count1">{{zero carTypeA2}}</td>
                <td>{{zero carTypeA3}}</td>
                <td class="count2">{{zero carTypeB1}}</td>
                <td class="sum">{{zero carTypeB2}}</td>
                <td class="jqInsurance">{{zero carTypeC1}}</td>
                <td>{{zero carTypeC2}}</td>
                <td>{{zero kmyybmBigCar}}</td>
                <td>{{zero kmyybmSmallCar}}</td>
                <td>{{zero kmyyyBigCar}}</td>
                <td>{{zero kmyyySmallCar}}</td>
                <td>{{zero kmybjgBigCar}}</td>
                <td>{{zero kmybjgSmallCar}}</td>
                <td>{{zero kmyjgBigCar}}</td>
                <td>{{zero kmyjgSmallCar}}</td>
                <td>{{sum kmybjgBigCar kmyjgBigCar}}</td>
                <td>{{sum kmybjgSmallCar kmyjgSmallCar}}</td>

            </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
</script>
<script id="table-template-carrefuke2" type="text/x-handlebars-template">
    <div class="journaling">
        <table id="template" width="100%" align="center" style="min-height:30px;border-spacing:0;">
            <tr class="shuju">
                <td style="width: 20px;height: 25px; font-size: 18px;" colspan="22">学员状态统计汇总表（大小车科目二）</td>
            </tr>
            <tr class="shuju">
                <td colspan="6" style="width: 20px;height: 25px; font-size: 16px;">单位名称：{{gsName}}</td>
                <td style=" text-align: center; " colspan="21">时间：<span
                        id="beginTime"></span>至<span
                        id="endTime"></span></td>
            </tr>
            <tbody id="table1" style="border-spacing: 0px">
            <tr class="shuju">
                <td rowspan="3" style="background: rgb(228,234,254)">月份</td>
                <td colspan="7" style="background: rgb(228,234,254)">车型(进入科二培训的总人数)</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目二已培训</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目二未培训</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">培训合计</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目二及格</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目二不及格</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目二未到</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">考试及未考合计</td>
            </tr>
            <tr class="shuju">
                <td colspan="5" style="background: rgb(228,234,254)">大车</td>
                <td colspan="2" style="background: rgb(228,234,254)">小车</td>
            </tr>
            <tr class="shuju">
                <td id="shuju_td">A1</td>
                <td>A2</td>
                <td>A3</td>
                <td>B1</td>
                <td>B2</td>
                <td>C1</td>
                <td>C2</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
            </tr>
            </tbody>
            <tbody id="table2">
            {{#each carExpense}}
            <tr class="shuju">
                <td>{{zero fbizdate}}</td>
                <td>{{zero carTypeA1}}</td>
                <td class="count1">{{zero carTypeA2}}</td>
                <td>{{zero carTypeA3}}</td>
                <td class="count2">{{zero carTypeB1}}</td>
                <td class="sum">{{zero carTypeB2}}</td>
                <td class="jqInsurance">{{zero carTypeC1}}</td>
                <td>{{zero carTypeC2}}</td>
                <td>{{zero ypxBigCar}}</td>
                <td>{{zero ypxSmallCar}}</td>
                <td>{{zero wpxBigCar}}</td>
                <td>{{zero wpxSmallCar}}</td>
                <td>{{sum ypxBigCar wpxBigCar}}</td>
                <td>{{sum ypxSmallCar wpxSmallCar}}</td>
                <td>{{zero kmehgBigCar}}</td>
                <td>{{zero kmehgSmallCar}}</td>
                <td>{{zero kmebhgBigCar}}</td>
                <td>{{zero kmebhgSmallCar}}</td>
                <td>{{zero kmewdBigCar}}</td>
                <td>{{zero kmewdSmallCar}}</td>
                <td>{{sum3 kmehgBigCar kmebhgBigCar kmewdBigCar}}</td>
                <td>{{sum3 kmehgSmallCar kmebhgSmallCar kmewdSmallCar}}</td>

            </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
</script>
<script id="table-template-carrefuke3" type="text/x-handlebars-template">
    <div class="journaling">
        <table id="template" width="100%" align="center" style="min-height:30px;border-spacing:0;">
            <tr class="shuju">
                <td style="width: 20px;height: 25px; font-size: 18px;" colspan="22">学员状态统计汇总表（大小车科目三）</td>
            </tr>
            <tr class="shuju">
                <td colspan="6" style="width: 20px;height: 25px; font-size: 16px;">单位名称：{{gsName}}</td>
                <td style=" text-align: center; " colspan="21">时间：<span
                        id="beginTime"></span>至<span
                        id="endTime"></span></td>
            </tr>
            <tbody id="table1" style="border-spacing: 0px">
            <tr class="shuju">
                <td rowspan="3" style="background: rgb(228,234,254)">月份</td>
                <td colspan="7" style="background: rgb(228,234,254)">车型(进入科三培训的总人数)</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目三已培训</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目三未培训</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">培训合计</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目三及格</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目三不及格</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">大小车科目三未到</td>
                <td rowspan="2" colspan="2" style="background: rgb(228,234,254)">考试及未考合计</td>
            </tr>
            <tr class="shuju">
                <td colspan="5" style="background: rgb(228,234,254)">大车</td>
                <td colspan="2" style="background: rgb(228,234,254)">小车</td>
            </tr>
            <tr class="shuju">
                <td id="shuju_td">A1</td>
                <td>A2</td>
                <td>A3</td>
                <td>B1</td>
                <td>B2</td>
                <td>C1</td>
                <td>C2</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
                <td>大车</td>
                <td>小车</td>
            </tr>
            </tbody>
            <tbody id="table2">
            {{#each carExpense}}
            <tr class="shuju">
                <td>{{zero fbizdate}}</td>
                <td>{{zero carTypeA1}}</td>
                <td class="count1">{{zero carTypeA2}}</td>
                <td>{{zero carTypeA3}}</td>
                <td class="count2">{{zero carTypeB1}}</td>
                <td class="sum">{{zero carTypeB2}}</td>
                <td class="jqInsurance">{{zero carTypeC1}}</td>
                <td>{{zero carTypeC2}}</td>
                <td>{{zero ypxBigCar}}</td>
                <td>{{zero ypxSmallCar}}</td>
                <td>{{zero wpxBigCar}}</td>
                <td>{{zero wpxSmallCar}}</td>
                <td>{{sum ypxBigCar wpxBigCar}}</td>
                <td>{{sum ypxSmallCar wpxSmallCar}}</td>
                <td>{{zero kmehgBigCar}}</td>
                <td>{{zero kmehgSmallCar}}</td>
                <td>{{zero kmebhgBigCar}}</td>
                <td>{{zero kmebhgSmallCar}}</td>
                <td>{{zero kmewdBigCar}}</td>
                <td>{{zero kmewdSmallCar}}</td>
                <td>{{sum3 kmehgBigCar kmebhgBigCar kmewdBigCar}}</td>
                <td>{{sum3 kmehgSmallCar kmebhgSmallCar kmewdSmallCar}}</td>

            </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
</script>
<script type="text/javascript">
    $(function () {
        $('#selsect').click()
    });
    //弹出框模版文件
    var myTemplate_studentState1 = Handlebars.compile($("#table-template-carrefuke1").html());
    var myTemplate_studentState2 = Handlebars.compile($("#table-template-carrefuke2").html());

    var myTemplate_carrefuke3 = Handlebars.compile($("#table-template-carrefuke3").html());
    //注册一个比较内容是否为空
    Handlebars.registerHelper("isNull", function (v1, options) {
        if (v1 != "") {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare", function (v1, v2, options) {
        if (v2 == 100) {
            //满足添加继续执行
            return options.fn(this);
        }
        if (v1 == v2) {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    Handlebars.registerHelper("division", function (num1, num2) {
        if (num1 == 0 || num2 == 0) {
            return 0;
        }
        return (num1 / num2).toFixed(2);
    });

    Handlebars.registerHelper("sum", function (num1, num2) {
        return (num1 * 1 + num2 * 1);
    });
    Handlebars.registerHelper("sum3", function (num1, num2, num3) {
        return (num1 * 1 + num2 * 1 + num3 * 1);
    });
    Handlebars.registerHelper("zero", function (num1) {
        if (num1 == null) {
            return 0;
        }
        else {
            return num1;
        }
    });


    $('#selsect').click(function () {
        cfoilspecName = $('#cfoilspecName').val()
        begindate = $('#datemin').val()
        enddate = $('#datemax').val()
        $('#temp').html("<div class='loading'></div>");

        $.ajax({
            url: '<%=path%>/DrivingSys/selStudentStateJournal',
            type: "post",
            data: {
                'cfoilspecName': cfoilspecName,
                'begindate': begindate,
                'enddate': enddate,
                'state': $('#state').val()
            },
            dataType: "json",
            success: function (res) {
                //如果是查询总报表 fbizDate字段为空

                if (res.state == 1) {
                    $('#temp').html(myTemplate_studentState1(res));
                    $('#fileNames').val('学员状态统计汇总表（大小车科目一）')
                }
                if (res.state == 2) {
                    $('#temp').html(myTemplate_studentState2(res));
                    $('#fileNames').val('学员状态统计汇总表（大小车科目二）')
                }
                if (res.state == 3) {
                    $('#temp').html(myTemplate_carrefuke3(res));
                    $('#fileNames').val('学员状态统计汇总表（大小车科目三）')
                }
                $('#beginTime').html($('#datemin').val())
                $('#endTime').html($('#datemax').val())
                $('#xls').val($('#temp').html())
            },
            error: function () {
                alert('Error');
            }
        });

    })

</script>
<%@ include file="/WEB-INF/JSP/ajax.jsp" %>
</html>